<template>
	<view class="content">
		<u-navbar back-text="" 
		:leftIconColor="tksetting.titlecolor" 
		:bgColor="tksetting.color" 
		:titleStyle="{color:tksetting.titlecolor}" 
		:title="title"  
		:autoBack="true"  
		:placeholder="true">
		</u-navbar>
		<view class="">
			<map 
			    ref="map" id="map"
				style="width: 100%; height: 50vh; position: fixed; z-index: 999999;"
				:scale="mapscale"
				:latitude="latitude"
				:longitude="longitude"
				:markers="covers"
				@markertap="markertap"
			>
			</map>
		
			<view style="padding: 50vh 0 0 0">
				<u-cell-group>
					<u-cell 
						v-for="(item,index) in covers" :key="index"
						@click="dw(item)"
						:title="item.title"
						:label="item.label"
					>
					<view slot="value">
						<u-button icon="map-fill" size="mini" @click="daohang(item)" text="导航"></u-button>
					</view>
					
					</u-cell>
				</u-cell-group>
				
			</view>
		</view>
	</view>
</template>
<script>
import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
import { mapState } from 'vuex';
export default {
	data() {
		return {
			title: '血站地图分布图',
			mapscale:11,
			latitude: '',
			longitude: '',
			covers: [{
				id:1, // 使用 marker点击事件 需要填写id
				title:'成都市太升南路血站',
				label:'开放时间:09:00-17:00',
				latitude: 30.66135,
				longitude: 104.074347,
				callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '成都市太升南路血站', //文本
						color: '#ffffff', //文字颜色
						fontSize: 12, //文本大小
						borderRadius: 12, //边框圆角
						padding: '6',
						bgColor: '#E03B5D', //背景颜色
						display: 'ALWAYS', //常显
					},
				iconPath: 'https://xmld.mingrui.ltd/Public/images/logo.png', // 图标路径（需存在）
				width: 30,
				height: 30
			}, {
				id:2, // 使用 marker点击事件 需要填写id
				title:'天府广场血站',
				label:'开放时间:09:00-17:00',
				latitude: 30.661749,
				longitude: 104.077896,
				callout: { //自定义标记点上方的气泡窗口 点击有效
						content: '天府广场血站', //文本
						color: '#ffffff', //文字颜色
						fontSize: 12, //文本大小
						borderRadius: 12, //边框圆角
						padding: '6',
						bgColor: '#E03B5D', //背景颜色
						display: 'ALWAYS', //常显
					},
				iconPath: 'https://xmld.mingrui.ltd/Public/images/logo.png',
				width: 30,
				height:30
			}]
		}
	},
	onLoad() {
		this.getLocation();
		this.init()
	},
	onShow() {
		
	},
	onReady() {
		
	},
	computed: {
		...mapState(['tksetting'])
	},
	methods: {
		init() {
			 this.$api.xuezhan_list().then(res=>{
				 console.log(res.data)
				 this.covers=res.data;
			 })
		},
		getLocation(){
			const _this=this;
			uni.getLocation({
			  type: 'wgs84',
			  success: function (res) {
				   console.log(res)
				   _this.longitude=res.longitude
				   _this.latitude=res.latitude
			  },
			  fail: function(err) {
							 console.error('获取位置失败', err);
			  }
			});
		},
		dw(e){
			console.log(e)
			uni.createMapContext("map", this).moveToLocation({
				latitude: e.latitude,
				longitude: e.longitude,
			});
			this.mapscale=15;
		},
		markertap(e){
			console.log(e)
		},
		//导航规划
		daohang(item){
			wx.openLocation({
			  latitude: item.latitude,//目的地的纬度
			  longitude: item.longitude,//目的地的经度
			  name: item.addr, //打开后显示的地址名称
			})
			
		}
	}
}
</script>
<style lang="scss" scoped>
	.content{}
</style>